<html>
<body onload="updateAll(-1)">

<br>
<a href="javascript:updateAll(0)">first</a>
<a href="javascript:updateAll(1)">second</a>
<a href="javascript:updateAll(2)">third</a>
<br>
<br>
<form name="selectors">
{% for ix, dim in enumerate(stat_dims) %}
{% for value in dim %}
<input type="radio" name="dim{{ix}}" value="{{value}}" onclick="updateAll(-1)" checked> {{value}}
{% endfor %}
<br>
{% endfor %}
</form>
<hr>
{% for ix, package in enumerate(packages) %}
<div id="{{ix}}" style="padding: 0px">
<div id="{{ix}}-blurb" style="position: absolute; right: 10px;">blurb</div>
<b>{{package.doctest}}</b>
</div>
{% endfor %}
<script>

function valueOf(radio) {
    for(var i = 0; i < radio.length; i++) {
        if(radio[i].checked) {
            return radio[i].value;
        }
    }
}


function updateAll(signal) {
    if (signal == -1) {
        elements = document.forms['selectors'].elements;
        signal = "";
{% for ix, dim in enumerate(stat_dims) %}
        signal += "_" + valueOf(elements["dim{{ix}}"]);
{% endfor %}
        signal = signal.substring(1);
    }
    for (var i = 0; i < data.length; i++) {
        id = "" + i;
        document.getElementById(id).style.background = data[i][signal][1];
        document.getElementById(id + "-blurb").innerHTML = data[i][signal][2];
    }
}

var data = new Array();
data[0] = [[0, "#0F0", "good"], [0, "#FF0", "OK"], [0, "#F00", "bad"]];
var template = true;

/* {{"*" + "/"}}

template = false;

{% for ix, datum in enumerate(packages) %}
data[{{ix}}] = {
{% for perm in cross_product(*stat_dims) %}
  {{'_'.join(perm)}} : {{datum['stats'][perm]}},
{% endfor %}
};
{% endfor %}

{{"/" + "*"}} */

</script>
</body>
</html>